<template>
    <div class="word-to-voice">
        <header-a type="word-to-voice"/>
        <div class="w1">

            <div class="w11 text-center">文字转语音</div>

            <div class="w12 mar-center">
                <span @click="toInstructions">使用说明？</span>
            </div>

            <div class="w13 container-align mar-center">
                <div class="w14">添加文字</div>
                <div class="w15 container-align">
                    <div>选择音源</div>
                    <div @click="toHistory">历史合成</div>
                </div>
            </div>

            <div class="w16 container-align mar-center">
                <div class="w17">

                    <div class="w19">

                        <div class="w26 container-align" v-for="(i, index) in list" :key="i.id">
                            <div class="w27">文字{{index + 1}} :</div>
                            <div class="w28">
                                <a class="clipboard" title="点击复制" :data-clipboard-text="i.name">{{i.name}}</a>
                                <img src="../assets/img/32.png" @click.stop="delWord(index)"/>
                            </div>
                            <div class="w29">{{i.num}}字</div>
                        </div>

                    </div>

                    <div class="w20 container-align">
                        <div class="container-align">
                            <div class="w22">累计消耗：{{integral}}积分</div>
                            <div class="w23" @click="toIntegralRule">（积分规则？）</div>
                        </div>
                        <div class="w21">3/50</div>
                    </div>

                    <div class="w24 container">
                        <textarea name="text" id="text" v-model="word" cols="30" rows="10" placeholder="请输入文本.."></textarea>
                        <img class="w45" src="../assets/img/31.png" @click="addWord"/>
                    </div>

                    <!--<div class="w30">
                      <img class="w25" src="../assets/img/28.png"/>
                      <input type="file"  @change="fileChange" name="file">
                    </div>-->

                </div>
                <div class="w18">

                    <div class="w31 container-align text-center">
                        <div :class="['w32', i.id === typeId && 'wh']" v-for="i in types" :key="i.id" @click="chooseType(i.id)">{{i.name}}</div>
                    </div>

                    <div class="w33">

                        <div class="w88">

                            <div class="voice-type-item" v-for="i in d" :key="i.voice" @click="chooseVoice(i.voice)">
                                <div :class="['w35', 'container-align', i.voice === voiceType && 'wh50']" >
                                    <img class="w25" src="../assets/img/29.png" v-if="i.type === 0"/>
                                    <img class="w25" src="../assets/img/30.png" v-else/>
                                    <a class="w50" :title="i.name">{{i.name}}</a>
                                </div>
                                <div class="w89 text-center" :class="i.voice === voiceType && 'wh89'" @click.stop="tryAudition(i.voice, i.url)">
                                    <img class="w25" src="../assets/img/pause.png" v-if="i.voice === voiceType && audioStatus"/>
                                    <img class="w25" src="../assets/img/38.png" v-else-if="i.voice === voiceType && !audioStatus"/>
                                    <img class="w25" src="../assets/img/play.png" v-else/>
                                    <div class="w90">试听</div>
                                    <audio class="w91" controls @pause="pause" @ended="ended" v-if="i.voice === voiceType && i.url" ref="tryAudio">
                                        <source :src="i.url" type="audio/mpeg">
                                        <!--<source src="horse.ogg" type="audio/ogg">-->
                                        Your browser does not support this audio format.
                                    </audio>

                                </div>
                            </div>

                        </div>

                    </div>

                </div>
            </div>

            <div class="w34 mar-center container-align" @mousemove="movePointer" @mouseleave="moveOver" @mouseup="moveOver">
                <div class="w36 container-align">

                    <div class="container-align">
                        <div class="w37">音量</div>
                        <div class="w38">
                            <div class="w39" :style="{left: (left - 6) + 'px'}" @mousedown="tapPointer($event, 0)"></div>
                        </div>
                        <div class="w37">{{ volume }}</div>
                    </div>

                    <div class="container-align">
                        <div class="w37">语速</div>
                        <div class="w38">
                            <div class="w39" :style="{left: (leftT - 6) + 'px'}" @mousedown="tapPointer($event, 1)"></div>
                        </div>
                        <div class="w37">{{ tone }}</div>
                    </div>

                    <div class="container-align" style="margin-right: 0">
                        <div class="w40">语音格式</div>
                        <div :class="['w41', format === 0 && 'check']" @click="selFormat(0)"></div>
                        <div class="w40" @click="selFormat(0)">MP3</div>
                        <div :class="['w41', format === 1 && 'check']" @click="selFormat(1)"></div>
                        <div class="w40" @click="selFormat(1)">WAV</div>
                    </div>

                </div>
                <div class="w51 container-align">
                    <div class="w46 text-center" @click="audition">立即试听</div>
                    <div class="w44 text-center" @click="textTransform">立即合成</div>
                    <div class="w42" @click="selAgreement">
                        <img v-if="agreement" src="../assets/img/25.png"/>
                    </div>
                    <div class="w43" @click="toAgree">免责协议</div>
                </div>
            </div>
            <div class="w8 mar-center">使用 &lt;1s&gt; 来停顿，中间 1s 代表一秒，支持 0.1s ~ 10s</div>
        </div>
        <cooperative/>
        <bottom/>
        <customer-service/>
        <!--
        <div class="w5 container-align">
            <img class="w51" src="../assets/img/7.png" />
            <img class="w52" src="../assets/img/36.png" />
        </div>
        -->

        <!--<div class="w6" v-if="auditionModel">
            <div class="w61">
                <img class="w62" src="../assets/img/23.png" @click="hideAudition"/>
                <div class="w63 mar-center text-center">试听提示</div>
                <div class="w64 mar-center">此次试听将截取您第一条文本的前20个字，并且会扣除{{list[0].auditionIntegral}}积分。</div>

                <div class="w65 container-justf">
                    <div class="w66 text-center" @click="hideAudition">取消</div>
                    <div class="w67 text-center" @click="listenAudition">确认</div>
                </div>
            </div>
        </div>-->

        <audio class="audio-t" controls v-if="trySource" ref="audio" >
            <source :src="trySource" type="audio/mpeg">
            <!--<source src="horse.ogg" type="audio/ogg">-->
            Your browser does not support this audio format.
        </audio>

    </div>
</template>

<script>
import HeaderA from "@/components/child/Header";
import Cooperative from "@/components/Cooperative";
import Bottom from "@/components/Bottom";
import ClipboardJS from 'clipboard';
import CustomerService from "@/components/CustomerService";

export default {
    name: "WordToVoice",
    components: { HeaderA, Cooperative, Bottom, CustomerService },
    data () {
        // this.tone = Math.round(this.leftT / 112 * 1000) - 500
        let tone = 0;
        let leftT = 56;
        if (localStorage.getItem('tone')) {
            tone = Number(localStorage.getItem('tone'));
            leftT = Math.round((tone + 500) / 1000 * 112)
        }
        console.log(leftT, tone)

        return {
            // auditionModel: false,
            typeId: '1',
            types: [
                {
                    id: '1',
                    name: '客服'
                },
                {
                    id: '0',
                    name: '通用'
                },
                {
                    id: '2',
                    name: '童声'
                },
                {
                    id: '3',
                    name: '英文'
                },
                {
                    id: '4',
                    name: '方言'
                },
                {
                    id: '5',
                    name: '文学'
                },
                {
                    id: '',
                    name: '全部'
                }
            ],
            d: [],
            list: [],
            format: 0,
            agreement: false,
            requesting: false,
            requesting2: false,
            requesting3: false,
            X: 0,
            XT: 0,
            left: 56,
            leftT,
            word: '',
            volume: 50,
            tone,
            voiceType: '',
            integral: 0,
            trySource: '',
            clipboard: null,
            audioStatus: false
        }
    },
    mounted () {
        this.getParam();
    },
    beforeDestroy () {
        if (this.clipboard) this.clipboard.destroy();
    },
    methods: {
        pause () {
            this.audioStatus = false
        },
        ended () {
            this.audioStatus = false
        },
        tryAudition (voice, url) {
            if (!url) {
                alert('无播放资源！');
                return;
            }
            this.voiceType = voice;
            this.$nextTick(() => {
                const m = this.$refs.tryAudio[0];
                console.log(m);
                if (this.audioStatus) {
                    m.pause();
                } else {
                    m.play();
                    this.audioStatus = true
                }
            })
        },
        async listenAudition () {
            if (this.list.length === 0) {
                alert('请添加需要转换的文字！');
                return;
            }
            if (this.requesting2) return;
            this.requesting2 = true;
            this.trySource = '';
            let res = await this.$http.post('audition', {
                "wxId": this.$root.wxId,             // 微信用户Id
                "text": this.list[0].name,            // 需要转换的文本
                "sx": this.format === 0 ? "mp3" : 'wav',            // 音频格式[mp3/wav]
                "pitchRate": this.tone.toString(),       // 音调 -500~500
                "volume": this.volume.toString(),         // 音量 0～100
                "voice": this.voiceType      // 发音人
            });
            if (res.data.result !== 1) {
                alert(res.data.message);
            }
            this.requesting2 = false;
            console.log(res);
            this.trySource = res.data.data;
            this.$nextTick(() => {
                this.$refs.audio.play();
            })
            this.hideAudition();
            this.$emit('update');
        },
        toAgree () {
            this.$router.push('/agreement')
        },
        toIntegralRule () {
            this.$router.push('/integral-rule/1')
        },
        hideAudition () {
            this.auditionModel = false;
        },
        audition () {
            if (!this.$root.wxId) {
                this.$router.push('/login');
                return;
            }
            if (this.list.length === 0) {
                alert('请添加需要试听的文字！')
                return
            }
            // this.auditionModel = true;
            const c = confirm(`此次试听按每字1积分收费，将扣除${this.list[0].auditionIntegral}积分。`)
            if (c) this.listenAudition()
        },
        toHistory () {
            if (!this.$root.wxId) {
                this.$router.push('/login');
                return;
            }
            this.$router.push('/history/0')
        },
        toInstructions () {
            this.$router.push('/instructions/0')
        },
        delWord (index) {
            this.list.splice(index, 1);
            this.integral = 0;
            this.list.forEach(v => {
                this.integral += v.integral;
            });
        },
        async addWord () {
            // this.$emit('update');
            if (!this.word) {
                alert('请输入需要转换的文字')
                return
            }
            /*this.list.push({
                id: new Date().getTime() + this.list.length,
                name: this.word,
                num: this.word.length
            })*/

            const text = this.word
            if (this.requesting3) return;
            this.requesting3 = true;
            if (this.clipboard) this.clipboard.destroy();
            this.clipboard = new ClipboardJS('.clipboard');
            let res = await this.$http.post('textIntegral', {text});
            this.requesting3 = false;
            console.log(res); // auditionIntegral // integral
            const m = res.data.data;
            this.list.push({
                id: new Date().getTime() + this.list.length,
                name: text,
                num: m.textLength,
                integral: Number(m.integral),
                auditionIntegral: m.auditionIntegral
            });
            this.integral = 0;
            this.list.forEach(v => {
                this.integral += v.integral;
            })
            this.word = ''
        },
        chooseVoice (voice) {
            this.voiceType = voice;
        },
        chooseType (id) {
            this.typeId = id
            this.getParam();
        },
        async getParam () {

            let data = {}
            if (this.typeId) {
                data = {
                    scene: this.typeId
                }
            }
            let res = await this.$http.post('findVoice', data);

            this.d = res.data.data;
            this.voiceType = this.d[0].voice
        },
        async textTransform () {
            localStorage.setItem('tone', this.tone.toString())
            if (!this.$root.wxId) {
                this.$router.push('/login')
                return
            }
            if (!this.agreement) {
                alert('请勾选免责协议！')
                return
            } else if (this.list.length === 0) {
                alert('请添加需要转换的文字！')
                return
            }
            if (this.requesting) return;
            this.requesting = true;
            let res = await this.$http.post('textTransform', {
                "wxId": this.$root.wxId,             // 微信用户Id
                "textJson":[            // 需要转换的文本
                    ...this.list.map(v => v.name)
                ],
                "sx": this.format === 0 ? "mp3" : 'wav',            // 音频格式[mp3/wav]
                "pitchRate": this.tone.toString(),       // 音调 -500~500
                "volume": this.volume.toString(),         // 音量 0～100
                "voice": this.voiceType      // 发音人
            });
            this.requesting = false;
            console.log(res);
            if (res.data.result === 1){
                this.toHistory();
            }
            alert(res.data.message)
            this.$emit('update');
        },
        fileChange () {
        },
        selFormat (t) {
            this.format = t;
        },
        tapPointer (e, t) {
            console.log(e);
            if (t === 0) {
                this.X = e.clientX
            } else {
                this.XT = e.clientX
            }
        },
        movePointer (e) {
            if (this.X !== 0) {
                const m = (e.clientX - this.X) + this.left;
                if (m >= 0 && m <= 112) {
                    this.left = m
                }
                this.X = e.clientX

                this.volume = Math.round(this.left / 112 * 100)

            } else if (this.XT !== 0) {
                const m = (e.clientX - this.XT) + this.leftT;
                if (m >= 0 && m <= 112) {
                    this.leftT = m
                }
                this.tone = Math.round(this.leftT / 112 * 1000) - 500
                this.XT = e.clientX
            }
        },
        moveOver () {
            this.X = 0
            this.XT = 0
        },
        selAgreement () {
            this.agreement = !this.agreement
        }
    }
}

</script>

<style scoped lang="scss">
.word-to-voice {
    .audio-t{
        display: none;
    }
    .w6{
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .w61{
            width: 658px;
            height: 360px;
            background-color: rgba(255, 255, 255, 1);
            position: absolute;
            left: 50%;
            margin-left: -329px;
            top: 120px;
            .w65{
                margin-top: 30px;
                font-size: 20px;
                color: #FFFFFF;

                .w66{
                    width: 121px;
                    height: 55px;
                    line-height: 55px;
                    background: rgba(0, 0, 0, 0.2);
                    margin-right: 34px;
                    cursor: pointer;
                }
                .w67{
                    width: 121px;
                    height: 55px;
                    line-height: 55px;
                    background-color: #26C6AB;
                    cursor: pointer;
                }
            }
            .w64{
                width: 497px;
                height: 100px;
                font-size: 20px;
                line-height: 28px;
                color: rgba(0, 0, 0, 0.6);
                margin-top: 10px;
            }
            .w63{
                font-size: 20px;
                line-height: 28px;
                color: #000000;
                padding-top: 55px;
                padding-bottom: 24px;
                width: 497px;
                border-bottom: 1px dashed #000000;
            }
            .w62{
                width: 19px;
                height: 19px;
                position: absolute;
                right: 19px;
                top: 19px;
                cursor: pointer;
            }
        }
    }
    .w1 {
        padding-top: 96px;
        padding-bottom: 96px;
        .w8{
            line-height: 30px;
            width: 1200px;
        }
        .w34{
            height: 88px;
            width: 1200px;
            background-color: #26C6AB;
            padding-left: 22px;
            padding-right: 37px;
            justify-content: space-between;
            .w36{

            }
            .w40{
                margin-right: 13px;
                color: #FFFFFF;
                cursor: pointer;
            }
            .w41.check{
                position: relative;
                &:after{
                    position: absolute;
                    content: '';
                    width: 7px;
                    height: 7px;
                    top: 3px;
                    left: 3px;
                    background-color: #26C6AB;
                    border-radius: 50%;
                }
            }
            .w41{
                width: 13px;
                height: 13px;
                background-color: #FFFFFF;
                border-radius: 50%;
                margin-right: 2px;
                cursor: pointer;
            }
            .w38{
                width: 112px;
                height: 6px;
                background-color: rgba(255, 255, 255, 0.4);
                border-radius: 3px;
                margin-right: 10px;
                margin-left: 10px;
                position: relative;
                cursor: pointer;
                .w39{
                    width: 13px;
                    height: 13px;
                    background-color: rgba(255, 255, 255, 1);
                    border-radius: 50%;
                    position: absolute;
                    top: -3px;
                }
            }
            .w51{
                font-size: 16px;
                color: #FFFFFF;
                .w42{
                    width: 16px;
                    height: 16px;
                    background-color: #FFFFFF;
                    margin-right: 4px;
                    cursor: pointer;
                    img{
                        width: 16px;
                        height: 16px;
                        position: relative;
                        top: -2px
                    }
                    align-self: flex-end;
                }
                .w43{
                    // margin-right: 31px;
                    color: #FFFFFF;
                    cursor: pointer;
                    align-self: flex-end;
                }
                .w46{
                    width: 122px;
                    height: 46px;
                    line-height: 46px;
                    background-color: #FFD453;
                    border-radius: 6px;
                    margin-right: 41px;
                    cursor: pointer;
                }
                .w44{
                    width: 122px;
                    height: 46px;
                    line-height: 46px;
                    background: #FFFFFF;
                    border-radius: 6px;
                    font-size: 16px;
                    color: #26C6AB;
                    cursor: pointer;
                    margin-right: 19px;

                }
            }
            .w37{
                font-size: 16px;
                color: #FFFFFF;
                width: 36px;
                /*.w42{
                  width: 16px;
                  height: 16px;
                  background-color: #FFFFFF;
                  margin-right: 4px;
                  cursor: pointer;
                  img{
                    width: 16px;
                    height: 16px;
                    position: relative;
                    top: -2px
                  }
                }*/
                /*.w43{
                  margin-right: 31px;
                  color: #FFFFFF;
                  cursor: pointer;
                }*/
                /*.w44{
                  width: 122px;
                  height: 46px;
                  line-height: 46px;
                  background: #FFFFFF;
                  border-radius: 6px;
                  font-size: 16px;
                  color: #26C6AB;
                  cursor: pointer;
                }*/
            }
            .w36 > div{
                margin-right: 70px;
            }
        }
        .w16{
            width: 1200px;
            background-color: #EFEFEF;
            height: 605px;
            .w17{
                flex-grow: 1;
                padding-left: 22px;
                padding-right: 18px;
                .w30{
                    position: relative;
                    input{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        opacity: 0;
                    }
                }
                .w24{
                    height: 100px;
                    background-color: #FFFFFF;
                    padding: 12px;
                    margin-top: 10px;
                    textarea{
                        flex-grow: 1;
                        border: none;
                        resize: none;
                        outline: none;
                    }
                    textarea::-webkit-input-placeholder {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.2);
                    }
                    textarea:-moz-placeholder {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.2);
                    }
                    textarea::-moz-placeholder {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.2);
                    }
                    textarea:-ms-input-placeholder {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.2);
                    }
                    .w45{
                        width: 46px;
                        height: 26px;
                        cursor: pointer;
                    }
                }
                .w25{
                    width: 100%;
                }
                .w20{
                    justify-content: space-between;
                    .w22{
                        line-height: 20px;
                        color: #000000;
                    }
                    .w23{
                        cursor: pointer;
                    }
                    .w23,.w21{
                        line-height: 20px;
                        color: rgba(0,0,0,0.6);
                        opacity: 0.6;
                    }
                }
                .w19{
                    height: 400px;
                    padding-top: 35px;
                    overflow-y: auto;
                    .w26{
                        margin-bottom: 12px;
                        .w27{
                            height: 22px;
                            font-size: 16px;
                            line-height: 22px;
                            color: #000000;
                            white-space: nowrap;
                        }
                        .w28{
                            line-height: 50px;
                            height: 50px;
                            background-color: #FFFFFF;
                            border-radius: 6px;
                            padding-left: 25px;
                            font-size: 16px;
                            color: rgba(0, 0, 0, 0.6);
                            opacity: 0.61;
                            padding-right: 25px;
                            margin-right: 10px;
                            position: relative;
                            max-width: 560px;
                            .clipboard{
                                display: block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                cursor: pointer;
                                text-decoration: none;
                            }
                            img{
                                width: 12px;
                                height: 12px;
                                position: absolute;
                                top: 1px;
                                right: 1px;
                                cursor: pointer;
                            }
                        }
                        .w29{
                            height: 20px;
                            line-height: 20px;
                            color: rgba(0, 0, 0, 0.6);
                            align-self: flex-end;
                            white-space: nowrap;
                        }
                    }
                }
            }
            .w18{
                width: 41.5%;
                min-width: 498px;
                align-self: flex-start;
                /*padding-right: 8px;*/
                .w33{
                    height: 540px;
                    background-color: #FFFFFF;
                    padding: 13px 12px 0 12px;
                    overflow-y: auto;

                    .w88 {
                        flex-wrap: wrap;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        .voice-type-item {
                            display: flex;
                            width: 228px;
                            align-items: center;
                            justify-content: space-between;
                            margin-bottom: 22px;
                            .w89{
                                width: 46px;
                                height: 72px;
                                background-color: #EFEFEF;
                                border-radius: 6px;
                                padding-top: 10px;
                                cursor: pointer;
                                img{
                                    width: 30px;
                                    height: 30px;
                                }
                                .w90{
                                    height: 20px;
                                    line-height: 20px;
                                    color: #26C6AB;
                                    margin-top: 2px;
                                }
                                .w91{
                                    display: none;
                                }
                            }
                            .wh89{
                                background-color: #26C6AB;
                                .w90{
                                    color: #FFFFFF;
                                }
                            }
                            .w35 {
                                width: 180px;
                                height: 72px;
                                background-color: #EFEFEF;
                                border-radius: 6px;
                                /*justify-content: center;*/
                                font-size: 16px;
                                color: #000000;
                                padding-left: 8px;
                                cursor: pointer;
                                transition: all 0.3s;

                                .w50 {
                                    max-width: 112px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    text-decoration: none;
                                }

                                img {
                                    width: 48px;
                                    height: 48px;
                                    border-radius: 50%;
                                    margin-right: 4px;
                                }
                            }
                            .wh50 {
                                // color: #26C6AB;
                                background-color: #26C6AB;
                                color: #FFFFFF;
                            }
                        }
                    }
                }
                .w31{
                    height: 64px;
                    background-color: #efefef;
                    // overflow-y: auto;

                    .w32{
                        width: 64px;
                        font-size: 16px;
                        color: #000000;
                        cursor: pointer;
                        line-height: 64px;
                    }
                    .wh{
                        // color: #26C6AB;
                        background-color: #FFFFFF;
                    }
                }
            }
        }
        .w15{
            justify-content: space-between;
            width: 41.5%;
            cursor: pointer;
        }
        .w14{
            flex-grow: 1;
        }
        .w13{
            height: 60px;
            background-color: #26C6AB;
            padding-left: 22px;
            padding-right: 35px;
            width: 1200px;
            font-size: 16px;
            color: #FFFFFF;
        }
        .w12{
            width: 1200px;
            text-align: right;
            margin-bottom: 10px;
            >span{
                cursor: pointer;
                height: 22px;
                font-size: 16px;
                line-height: 22px;
                color: rgba(0,0,0,0.4);
            }
        }
        .w11{
            height: 42px;
            font-size: 30px;
            line-height: 42px;
            color: #000000;
        }
    }
}
</style>